<template>
  <div class="t_container" id="particles-js">

    <div style="position: absolute;width: 100%;">
      <a-row align="middle" justify="center" type="flex">
        <a-col offset="2" span="4">
          <div id="time" style="color:#fff;font-size: 30px">
            {{ nowString }}
          </div>
        </a-col>
        <a-col span="12" class="t_header">
          <a-row justify="center" type="flex">
            <a-col>
                            <span
                              style="font-weight:900;color: #0EFCFF;font-size: 30px;font-family: myFirstFont,serif">非道路移动机械数字监管平台</span>
            </a-col>
          </a-row>
        </a-col>
        <a-col offset="4" span="2">
          <a-button style="background-color: transparent;color: #00beff;"
                    @click="$router.push('/dashboard/workplace')">进入系统
          </a-button>

        </a-col>
      </a-row>

      <div class="header-bottom"></div>

      <main class="t_main">
        <a-row>
          <a-col span="12">
            <div class="t_center_box">
              <div class="t_top_box">
                <!--                                <img alt="" class="t_l_line" src="@/assets/img/left_line.png">-->
                <ul class="t_nav">
                  <li>
                    <img src="../../assets/images/main_middle.png" />
                    <span>设备总数</span>
                    <span class="circle-tag" style="color: white">
                                        {{ pointInfo.length }}
                                    </span>
                    <i></i>
                  </li>
                  <li>
                    <img src="../../assets/images/main_middle.png" />
                    <span>静止的设备数</span>
                    <span class="circle-tag" style="color:rgb(61,147,253);">
                                        {{ restMachinesCount }}
                                    </span>
                    <i></i>
                  </li>
                  <li>
                    <img src="../../assets/images/main_middle.png" />
                    <span>工作的设备数</span>
                    <span class="circle-tag" style="color: greenyellow;">
                                        {{ workMachinesCount }}
                                    </span>
                    <i></i>
                  </li>
                  <li>
                    <img src="../../assets/images/main_middle.png" />
                    <span>超标设备数</span>
                    <a-tooltip title="点击查看脱离区域的设备列表">
                                            <span class="circle-tag" style="color: red;">
                                                {{ markersOutArea }}
                                            </span>
                    </a-tooltip>

                  </li>
                </ul>
              </div>
              <div class="t_bottom_box">
                <img alt="" class="t_l_line" src="@/assets/img/left_line.png">

                <a-modal :cancel-button-props="{ style: { display: 'none' } }"
                         :ok-button-props="{ style: { display: 'none' } }"
                         :title="outAreaOrMarkerCover ? '设备脱离区域，选择一个设备查看信息': '设备位置重复，选择一个设备查看信息'"
                         :visible="visible"
                         iconType="question-circle"
                         @cancel="visible=false"
                         @ok="visible=false"
                >

                  <a-list :data-source="data" item-layout="horizontal">
                    <a-list-item slot="renderItem" slot-scope="marker" rowKey="id">
                      <a slot="actions" @click="changePointInfo(marker)">查看信息</a>
                      <label for="mec_no">环保编号:
                        <span id="mec_no">{{ marker.getExtData().mec_no }}</span>
                      </label>
                    </a-list-item>
                  </a-list>
                </a-modal>


                <div id="container" class="echart"
                     style="width: 100%; height: 100%;background: transparent">
                </div>
                <img alt="" class="t_r_line" src="@/assets/img/right_line.png">
              </div>
            </div>

          </a-col>
          <a-col span="12">
            <a-row>
              <a-col span="12">
                <div class="t_right_box">
                  <img alt="" class="t_l_line" src="@/assets/img/left_line.png">
                  <div id="chart_4" class="echart" style="width: 100%; height: 4.6rem;"></div>

                </div>
              </a-col>
              <a-col offset="1" span="11">
                <header class="t_b_h">
                  <a-row style="height: 20px;line-height: 20px">
                    <a-col span="12">
                      <span style="font-size: 16px;">当前PM10最高值:</span>
                    </a-col>
                    <a-col span="5">
                                    <span style="font-size: 20px; color: red;font-weight: 700;text-align: center">
                                        {{
                                        pointInfo.length > 0 ? pointInfo[0].pm25 : 0
                                      }}
                                    </span>
                    </a-col>
                    <a-col span="6">
                      <span style="font-size: 16px; color: white;font-weight: 600;">ug/m³</span>
                    </a-col>
                  </a-row>
                  <!--                        <img src="@/assets/img/end.png"/>-->
                  <a-row style="margin-top: 4px;">
                    <a-col span="24">
                                            <span
                                              style="font-size: 16px; color: white;font-weight: 600;">污染位置:</span>
                    </a-col>
                  </a-row>
                  <a-row style="margin-top: 20px;">
                    <a-col span="24">
                                            <span>{{
                                                pointInfo.length > 0 ? pointInfo[0].formatted_address : ''
                                              }}</span>
                    </a-col>
                  </a-row>
                </header>
                <main class="t_b_m" style="margin-top: 180px;">
                  <img alt="" src="@/assets/img/map.png">
                  <a-row :gutter="[0,10]">
                    <a-col span="12">
                      <div class="t_b_box">
                        <span>溫度</span>
                        <i></i>
                        <h2>{{ weatherInfo != null ? weatherInfo.temperature : '' }}℃</h2>
                      </div>
                    </a-col>
                    <a-col span="12">
                      <div class="t_b_box1">
                        <span>湿度</span>
                        <i></i>
                        <h2>{{ weatherInfo != null ? weatherInfo.humidity : '' }}RH</h2>
                      </div>
                    </a-col>
                    <a-col span="12">
                      <div class="t_b_box2">
                        <span>风力</span>
                        <i></i>
                        <h2>{{ weatherInfo != null ? weatherInfo.windpower : '' }}级</h2>
                      </div>
                    </a-col>
                    <a-col span="12">
                      <div class="t_b_box3">
                        <span>风向</span>
                        <i></i>
                        <h2>{{ weatherInfo != null ? weatherInfo.winddirection : '' }}</h2>
                      </div>
                    </a-col>
                  </a-row>


                </main>
                <img alt="" class="t_r_line" style="bottom: 40px" src="@/assets/img/right_line.png">
              </a-col>
            </a-row>
            <a-row>
              <a-col span="12">
                <img alt="" class="t_l_line" src="@/assets/img/left_line.png">
                <div id="chart_1" class="echart" style="width: 100%; height: 3.6rem;"></div>
                <img alt="" class="t_r_line" style="bottom: 40px" src="@/assets/img/right_line.png">
              </a-col>
              <a-col span="12">
                <img alt="" class="t_l_line" src="@/assets/img/left_line.png">
                <h3 style="color:white;margin: 10px 0 0 10px">设备实时数据查看</h3>
                <div class="table-box" style="height: 38px;;">
                  <table class="t_table">
                    <thead style="font-size: 18px">
                    <tr>
                      <th>维护时间</th>
                      <th>工地</th>
                      <th>环保编号</th>
                      <th>PM10</th>
                    </tr>
                    </thead>
                    <a-row v-if="pointInfo.length === 0">
                      <a-col :offset="8" :span="16">
                        <a-empty />
                      </a-col>
                    </a-row>

                    <tbody style="opacity:0;">
                    <!--                                        <tr v-for="(item,index) in pointInfo" v-show="index < 500" :key="index"-->
                    <!--                                            :style="'color:' + item.color">-->
                    <!--                                            <td>{{-->
                    <!--                                                    moment(item.update_time * 1000).format("YYYY-MM-DD")-->
                    <!--                                                }}-->
                    <!--                                            </td>-->
                    <!--                                            <td>-->
                    <!--                                                <a-tooltip :title="item.formatted_address">-->
                    <!--                                                                                    <span>-->
                    <!--                                                                                    {{ item.title }}-->
                    <!--                                                                                    </span>-->
                    <!--                                                </a-tooltip>-->
                    <!--                                            </td>-->
                    <!--                                            <td>{{ item.mec_no }}</td>-->
                    <!--                                            <td>{{ item.pm25 }}</td>-->
                    <!--                                        </tr>-->
                    </tbody>

                  </table>
                </div>

                <div class="table-box">
                  <div class="tbl-body">
                    <table>
                      <tbody>
                      <tr v-for="(item,index) in pointInfo" :key="index"
                          :style="'color:' + item.color">
                        <td>{{
                            moment(item.update_time * 1000).format("YYYY-MM-DD")
                          }}
                        </td>
                        <td>
                          <a-tooltip :title="item.formatted_address">
                                                                                    <span>
                                                                                    {{ item.title }}
                                                                                    </span>
                          </a-tooltip>
                        </td>
                        <td>{{ item.mec_no }}</td>
                        <td>{{ item.pm25 }}</td>
                      </tr>
                      <tr v-for="(item,index) in pointInfo"
                          :key="pointInfo.length + index"
                          :style="'color:' + item.color">
                        <td>{{
                            moment(item.update_time * 1000).format("YYYY-MM-DD")
                          }}
                        </td>
                        <td>
                          <a-tooltip :title="item.formatted_address">
                                                                                    <span>
                                                                                    {{ item.title }}
                                                                                    </span>
                          </a-tooltip>
                        </td>
                        <td>{{ item.mec_no }}</td>
                        <td>{{ item.pm25 }}</td>
                      </tr>
                      </tbody>
                    </table>
                  </div>
                </div>

                <img alt="" class="t_r_line" src="@/assets/img/right_line.png">
              </a-col>
            </a-row>
          </a-col>
        </a-row>
      </main>
    </div>

  </div>
</template>

<script>
import $ from 'jquery'
import {echart_1, echart_4} from "../../assets/js/index"
import AMapLoader from "@amap/amap-jsapi-loader";
import {METHOD, request, RESPONSE} from "@/utils/request";
import moment from "moment";
import {mapGetters} from "vuex";
// eslint-disable-next-line no-unused-vars
import app from "../../assets/js/app";
import {useNow} from "@vueuse/core";
import {computed, ref} from "vue";


window._AMapSecurityConfig = {
  securityJsCode: '96fec6c6a41d2f9bd32c423a3c9987dc',
}

export default {
  name: "showstand1",
  setup() {
    let now = useNow();


    let nowString = computed({
      get: () => {
        return moment(now.value).format("YYYY-MM-DD HH:mm:ss")
      }
    });

    let weatherInfo = ref()
    // 查询高德地图获取天气信息
    $.getJSON("https://restapi.amap.com/v3/weather/weatherInfo?key=d0170a8330da9ed451542dfcd77772bb&city=510100", (res) => {
      console.log(res)
      weatherInfo.value = res.lives[0];
    })

    return {
      nowString,
      weatherInfo
    }
  },
  data() {
    return {
      mask: null,  // 地图不被遮挡的部分
      data: null,
      visible: false,
      outAreaOrMarkerCover: false, // true 点出了范围, false 点覆盖查询信息弹窗
      moment,
      greenImg: require("../../assets/img/green_site.png"),
      redImg: require("../../assets/img/red_site.png"),
      yellowImg: require("../../assets/img/yellow_site.png"),
      greyImg: require("../../assets/img/blue_site.png"),
      map: null,
      AMap: null,
      workMachinesCount: 0,
      restMachinesCount: 0,
      takeDownMachinesCount: 0,
      pointInfo: [],
      markers: [],
      markersWithSamePos: [],
      markersOutArea: 0,
      currentClickMarker: null, // 当前点击的点对象
      getDataTimer: null,
      timer: null,
      scroll: null
    }
  },
  computed: {
    ...mapGetters("account", ['user'])
  },
  beforeCreate() {
    $(function () {
      const whdef = 100 / 1920;// 表示1920的设计图,使用100PX的默认值
      // var wH = window.innerHeight;// 当前窗口的高度
      const wW = window.innerWidth;// 当前窗口的宽度
      const rem = wW * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
      $('html').css('font-size', rem + "px");
    });
    $(window).resize(function () {// 绑定到窗口的这个事件中
      const whdef = 100 / 1920;// 表示1920的设计图,使用100PX的默认值
      // var wH = window.innerHeight;// 当前窗口的高度
      const wW = window.innerWidth;// 当前窗口的宽度
      const rem = wW * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
      $('html').css('font-size', rem + "px");
    });
  },
  beforeDestroy() {
    // 销毁地图，并清空地图容器
    if (this.map != null) {
      this.map.destroy();
    }
    // 清空定时器
    clearInterval(this.getDataTimer);
    clearInterval(this.scroll);
  },
  mounted() {

    // 生成背景的方法
    app()

    this.userID = JSON.parse(localStorage.getItem(process.env.VUE_APP_USER_KEY)).id;


    // echart_2();
    // echart_3();

    // 先请求一次数据
    this.getRealTimeInfo(null, true);

    this.getAvgPm25();

    // 30秒更新一次数据
    this.getDataTimer = setInterval(() => {
      this.getRealTimeInfo();
      // echart_2();
      // echart_3();
      this.getAvgPm25();
    }, 1000 * 30);
  },
  methods: {
    showOutAreaMachineList() {

      if (this.markersOutArea.length > 0) {
        // 存在跑出区域的设备，才打开弹窗显示列表
        this.visible = true;
      }

      this.map.setMask(this.mask);

      // 找一个在当前区域的点，把它作为显示的中心
      // 区域编辑的循环
      try {
        this.mask.forEach((bound) => {
          // 点的循环
          this.markers.forEach((marker, index) => {
            // 使用高德的api判断点在不在多边形内
            let pointInRing = this.AMap.GeometryUtil.isPointInRing(marker.getPosition(), bound);

            if (pointInRing) {
              // 在区域内部，把它作为显示的中心
              console.log(`找到第${index}个点作为显示中心`);
              this.map.setCenter(marker.getPosition());
              throw new Error(); //结束循环
            }
          })

        })
      } catch (e) {
        // forEach 跳出整个循环，需要抛出异常，并且哪里捕获哪里之后再继续执行
        console.log(e.message);
      }

    },
    tableScroll() {
      $('.tbl-body').css('top', '0');
      let tblTop = 0;
      const speed = 50; // 数值越大越慢
      const outerHeight = $('.tbl-body tbody').find("tr").outerHeight();

      console.log('outerHeight' + outerHeight);

      // 防止重复添加定时任务，先清除一次
      clearInterval(this.scroll);
      this.scroll = setInterval(() => {
        if (tblTop <= -outerHeight * this.pointInfo.length) {
          tblTop = 0;
        } else {
          tblTop -= 1;
        }
        $('.tbl-body').css('top', tblTop + 'px');
      }, speed);

      // 鼠标移上去取消事件
      $(".tbl-body tbody").hover(() => {
        clearInterval(this.scroll);

        console.log("shit");
      }, () => {
        clearInterval(this.scroll);
        this.scroll = setInterval(() => {
          if (tblTop <= -outerHeight * this.pointInfo.length) {
            tblTop = 0;
          } else {
            tblTop -= 1;
          }
          $('.tbl-body').css('top', tblTop + 'px');
        }, speed);
      })

    },
    getAvgPm25() {
      request("/mechanics/getavgt", METHOD.GET, {
        id: this.userID
      }).then(res => {
        if (res.data.code === RESPONSE.SUCCESS_CODE) {
          echart_4(res.data.data);
        } else {
          echart_4([]);
        }
      })
    },
    markerClick(e) {
      // 如果没有和当前点击的点位置重复的点，就直接显示信息弹窗
      let currentMarker = e.target;
      this.currentClickMarker = currentMarker;

      for (let i = 0; i < this.markersWithSamePos.length; i++) {
        let markersWithSamePo = this.markersWithSamePos[i];


        if (currentMarker.getPosition().lng === markersWithSamePo[0].getPosition().lng
          && currentMarker.getPosition().lat === markersWithSamePo[0].getPosition().lat) {
          if (markersWithSamePo.length === 1) {
            // 如果没有和当前点击的点位置重复的点，就直接显示信息弹窗
            var infoWindow = new this.AMap.InfoWindow({
              offset: new this.AMap.Pixel(0, -30)
            });

            infoWindow.setContent(e.target.content);
            infoWindow.open(this.map, e.target.getPosition());
          } else {
            // 有和当前点击的点位置重复的点,显示一个弹窗选择一个点查看信息
            this.data = markersWithSamePo;

            console.log(this.data);
            this.outAreaOrMarkerCover = false;
            this.visible = true;
          }
        }
      }
    },
    initMap(isFirst) {
      var that = this;
      AMapLoader.load({
        key: "e6ae3ad4789b73879baf6e3a442b7781",             // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.DistrictSearch']      // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        this.AMap = AMap;
        var options = {
          subdistrict: 0,
          // 返回行政区边界坐标等具体信息
          extensions: 'all',
          // 设置查询行政区级别为 区
          level: 'district'
        };
        const district = new AMap.DistrictSearch(options);

        //查询北京市区域
        district.search(this.user.userqy !== null ? this.user.userqy : '青羊区', function (status, result) {
          console.log(status);
          console.log(result);
          const bounds = result.districtList[0]['boundaries'];
          let mask = [];
          let mapCenter = null;
          // 找一个在地图中的设备作为显示地图的中心点
          for (var i = 0; i < bounds.length; i++) {
            mask.push([bounds[i]]);

            if (mapCenter == null) {
              that.pointInfo.forEach((point, index) => {
                if (mapCenter == null) {
                  let pointInRing = that.AMap.GeometryUtil.isPointInRing([parseFloat(point.longitude), parseFloat(point.latitude)], bounds[i])

                  if (pointInRing) {
                    console.log(`当前点在区域内${index}`)

                    // 在区域内部，把它作为显示的中心
                    mapCenter = [parseFloat(point.longitude), parseFloat(point.latitude)]
                  } else {
                    console.log(`当前点不在区域内${index}`)
                  }
                }
              })
            }
          }
          that.mask = mask;


          //实例化地图
          const map = new AMap.Map('container', {
            mask: mask,
            zoom: 15,                //设置当前显示级别
            expandZoomRange: true,    //开启显示范围设置
            zooms: [7, 20],          //最小显示级别为7，最大显示级别为20
            center: mapCenter === null ? [result.districtList[0].center.lng, result.districtList[0].center.lat] : mapCenter,
            viewMode: '3D',          //这里特别注意，设置为3D则其它地区不显示
            zoomEnable: true,        //是否可以缩放地图
            resizeEnable: true,
            // mapStyle: "amap://styles/db9efe6a1745ac24b7269b862f359536"
            mapStyle: 'amap://styles/darkblue', // 自定义地图样式
          });
          that.map = map;
          //添加描边
          for (let j = 0; j < bounds.length; j++) {
            new AMap.Polyline({
              path: bounds[j],
              strokeColor: '#3078AC',
              strokeWeight: 2,
              map: map
            })
          }

          that.createMarker(isFirst);
        });

      }).catch(e => {
        console.log(e);
      })
    },
    /**
     * @param {null} status 要查询的机器的状态
     * @param isFirst
     */
    getRealTimeInfo(status, isFirst = false) {
      request("/mechanics/getDataListByArea", METHOD.GET, {
        id: this.userID,
        sel_level: null,
        sel_key: null,
        staue: status,
        input: null
      }).then(res => {
        if (res.data.code === RESPONSE.SUCCESS_CODE) {
          this.pointInfo = res.data.data;

          // this.$message.success(res.data.msg);

          if (isFirst) {
            // 右下角表格滚动
            this.$nextTick(() => {
              this.tableScroll();
            })

            this.initMap(isFirst)
          }

        } else {
          this.$message.error(res.data.msg);
        }
      })
    },
    createMarker(isFirst) {
      // 清空原来的点
      this.map.remove(this.markers);
      // 所有点对象清空
      this.markers = [];
      this.markersWithSamePos = [];


      // 清空统计的车辆数目
      this.takeDownMachinesCount = 0;
      this.workMachinesCount = 0;
      this.restMachinesCount = 0;
      this.markersOutArea = 0;

      console.log("length" + this.markersWithSamePos.length);


      // 单个点对象
      var marker;
      const myColor = ['#00e736', '#ffff1f', '#ff7600', '#ff0000', '#aa0045', '#8d0018'];

      // 创建一个 Marker 实例：
      for (let i = 0; i < this.pointInfo.length; i++) {
        let item = this.pointInfo[i];
        marker = null;

        // 不同状态的机器点颜色不一样，且统计一下对应的数量
        let icon = "";
        switch (item.status) {
          case 0:
            icon = this.greyImg;
            this.restMachinesCount++;
            break;
          case 1:
            icon = this.greenImg;
            this.workMachinesCount++;
            break;
          case 2:
            icon = this.yellowImg;
            this.takeDownMachinesCount++;
            break;
          case 3:
            icon = this.yellowImg;
            this.takeDownMachinesCount++;
            break;
        }

        // 给每个机械根据pm25一个对应的显示颜色

        item.lableColor = "#fff"
        if (item.pm25 >= 0 && item.pm25 <= 50) {
          item.color = myColor[0]
        } else if (item.pm25 <= 100) {
          item.color = myColor[1]
        } else if (item.pm25 <= 150) {
          item.color = myColor[2]
        } else if (item.pm25 <= 200) {
          item.color = myColor[3]
        } else if (item.pm25 <= 300) {
          item.color = myColor[4]

          if (item.status === 1) {
            icon = this.redImg;
          }
        } else {
          this.markersOutArea++
          item.color = myColor[5]
          // 工作的机器，如果pm2.5过高就闪烁
          if (item.status === 1) {
            icon = require("../../assets/img/hs.gif")
          } else if (item.status === 0) {
            item.lableColor = "#f00";
          }
        }


        // 处理不能打点的数据
        if (item.longitude === null || item.latitude === null) {
          continue;
        } else {

          // 能够打点的数据，直接创建marker,在决定这个marker放到二维数组的位置
          marker = new this.AMap.Marker({
            // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            position: [parseFloat(item.longitude), parseFloat(item.latitude)],
            title: '',
            icon: icon, // 添加 Icon 图标 URL
            extData: item
          });

          this.initMarker(marker, item);
          this.markers.push(marker);
        }

        if (item.cc_qy === 1) {
          // this.markersOutArea.push(marker);
        }

        // 添加第一个点
        if (this.markersWithSamePos.length === 0) {
          // 直接创建一个新的一维数组添加marker
          let temp = [];
          temp.push(marker)
          this.markersWithSamePos.push(temp);
        } else {
          // 不是第一个点
          for (let j = 0; j < this.markersWithSamePos.length; j++) {

            // 取出二维数组中的第一维
            let markersWithSamePo = this.markersWithSamePos[j];
            // 取出一维度数组的第一个
            let marker1 = markersWithSamePo[0];

            // console.log(this.markersWithSamePos);
            // console.log(j);

            if (marker1.getPosition().lng.toString() === parseFloat(item.longitude).toFixed(6)
              && marker1.getPosition().lat.toString() === parseFloat(item.latitude).toFixed(6)) {
              // 和这个数组的第一个元素位置相同，添加到这个数组的末尾
              markersWithSamePo.push(marker);

              // 有重复的点，旁边的lable只显示一个
              // marker.setLabel(null);

              // 找到位置了，就可以处理下一条数据了
              break;

            } else if (j + 1 === this.markersWithSamePos.length) {
              // 遍历完成都没有重复位置的点，直接创建一个新的一维数组添加marker
              let temp = [];
              temp.push(marker)
              this.markersWithSamePos.push(temp);
              // 上面push导致长度 + 1，不能跳出循环
              break;
            }
          }
        }
      }


      // 将创建的点标记添加到已有的地图实例：
      this.map.add(this.markers);

      // 刚刚进入界面 && 存在越界的设备
      if (isFirst && this.markersOutArea.length > 0) {
        this.outAreaOrMarkerCover = true;
        this.data = this.markersOutArea;

        this.$notification.warning({
          message: '存在脱离区域的设备',
          duration: 30, //默认 4.5 秒后自动关闭，配置为 null 则不自动关闭
          onClick: () => {
            console.log('Notification Clicked!');
          },
        });
      }


      // 显示饼状图
      echart_1([{name: "工作", value: this.workMachinesCount, itemStyle: {color: '#00ff00'}},
        {name: "静止", value: this.restMachinesCount, itemStyle: {color: 'grey'}},
        {name: "强拆", value: this.takeDownMachinesCount, itemStyle: {color: '#e4ff00'}}]
      );
    },
    initMarker(marker, item) {
      // 小数点的位置
      let pointIndex = item.pm25?.indexOf('.');
      // 点上显示的数字

      let offset = 0
      // 不同长度的数字设置不同的偏移量
      switch (pointIndex) {
        case undefined:
          offset = -16;
          break;
        case 1:
          offset = -16;
          break;
        case 2:
          offset = -20;
          break;
        case 3:
          offset = -23;
      }

      marker.setLabel({
        direction: 'right',
        offset: new this.AMap.Pixel(offset, -6),  //设置文本标注偏移量
        content: "<div class='info' style='color:" + item.lableColor + "'>" + (item.pm25 ? item.pm25?.substring(0, pointIndex) : 0) + "</div>", //设置文本标注内容
      });

      var _status = item.status;
      switch (_status) {
        case 0:
          _status = "<span style='color:green;'>静止</span>";
          break;
        case 1:
          _status = "<span style='color:red;'>运动</span>";
          break;
        case 2:
          _status = "无信号";
          break;
        case 3:
          _status = "<span style='color:#ffb400;'>强拆</span>";
          break;
      }

      marker.content = "<div style=\"\n" +
        "\t\t\t\t\t\tpadding: 7px;\n" +
        "\t\t\t\t\t\t\"><p>环保编码：" + item
          .mec_no + " </p><p class=\"\n" +
        "\t\t\t\t\t\tinput - item \">状态：<span style=\"\n" +
        "\t\t\t\t\t\t;\n" +
        "\t\t\t\t\t\t\">" + _status + "</span></p><p class=\"\n" +
        "\t\t\t\t\t\t input - item \">电量：" + item
          .electric + "%</p><p class=\"\n" +
        "\t\t\t\t\t\t input - item \">机械类型：" + item
          .type_name + "</p><p class=\"\n" +
        "\t\t\t\t\t\t input - item \">位置：" + item
          .formatted_address + "</p><p class=\"\n" +
        "\t\t\t\t\t\t input - item \">联系人：" + item
          .contacts + " </p><p class=\"\n" +
        "\t\t\t\t\t\t input - item \">电话：" + item.mobile + " </p><p class=\"\n" +
        "\t\t\t\t\t\t input - item \">PM10：" + item
          .pm25 + "μg/m³</p></div>";


      marker.on('click', this.markerClick);
    },
    changePointInfo(marker) {
      // 显示点的信息
      var infoWindow = new this.AMap.InfoWindow({
        offset: new this.AMap.Pixel(0, -30)
      });

      infoWindow.setContent(marker.content);
      infoWindow.open(this.map, marker.getPosition());

      if (this.outAreaOrMarkerCover) {
        this.map.setMask(null);
      }

      let item = marker.getExtData();

      // 小数点的位置
      let pointIndex = item.pm25?.indexOf('.');
      // 点上显示的数字

      let offset = 0
      // 不同长度的数字设置不同的偏移量
      switch (pointIndex) {
        case 1:
          offset = -16;
          break;
        case 2:
          offset = -20;
          break;
        case 3:
          offset = -23;
      }

      console.log(item.pm25);

      // 旁边所有的标签不显示了
      this.data.forEach(temp => {
        temp.setLabel({
          direction: 'right',
          offset: new this.AMap.Pixel(offset, -6),  //设置文本标注偏移量
          content: "<div class='info' style='color:" + item.lableColor + "'>" + item.pm25?.substring(0, pointIndex) + "</div>", //设置文本标注内容
        });
      })
      // 隐藏弹窗
      this.visible = false;
    },
  }
}
</script>

<style scoped>
@import '../../assets/css/index.css';

@font-face {
  font-family: myFirstFont;
  src: url("../../assets/fonts/DISPLAY FREE TFB.ttf")
}

.circle-tag {
  margin-top: 26px;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 26px;
  font-weight: 500;
  color: white;
  font-size: 24px;
  border-radius: 50%;
  border: 1px solid white;
  background-color: transparent;
}


.table-box {
  height: 180px;
  overflow: hidden;
  position: relative;
  width: 100%;
  /* margin: 100px auto; */

}

.tbl-body tr:nth-child(even) {
  background-color: rgba(100, 100, 100, 100);
}

.tbl-body tr:nth-child(odd) {
  background-color: rgba(0, 0, 0, 100);
}

.tbl-body {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.table-box table {
  width: 100%;
}

.table-box table th,
.table-box table td {
  font-size: 14px;
  text-align: center;
}

.header-bottom {
  width: calc(100% - .4rem);
  height: .16rem;
  background: url('../../assets/images/header.png') no-repeat;
  background-size: calc(100% - .2rem) 100%;
  padding: 0 .2rem;
  margin-left: .3rem;
}
</style>
